<template>
  <div class="ana-line">
    <div class="line" ref="line"></div>
  </div>
</template>

<script lang="ts">
import { onMounted, getCurrentInstance, ref, defineComponent } from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
  name: 'AnaBarV',
  props: {
    options: {
      required: true,
      type: Array,
    },
    values: {
      required: true,
      type: Array,
    },
    number: {
      required: true,
      type: Number,
    },
    options2: {
      type: Array,
      default: [],
    },
    data: {
      type: Array,
      default: [],
    },
  },
  setup(props) {
    const colors = [
      '#a4e0f7',
      '#fbda89',
      '#F08080',
      '#90EE90',
      '#C0C0C0',
      '#4169E1',
      '#FDF5E6',
      '#FF8C00',
    ];
    onMounted(() => {
      init();
    });
    const { proxy } = getCurrentInstance() as any;
    const line = ref(null);
    const init = () => {
      const myChart = proxy.$echarts.init(proxy.$refs.line);
      let option = {
        color: colors,
        xAxis: {
          type: 'category',
          data: props.options,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: props.values,
            type: 'line',
          },
        ],
      };

      option && myChart.setOption(option);
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    };
  },
});
</script>

<style scoped lang="scss">
.ana-line {
  height: 50vh;
  width: 50vw;
  div {
    height: 50vh;
    width: 50vw;
  }
}
</style>
